<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .images-list {
        background-color: darksalmon;
        margin: 5vh auto;
        display: flex;
        align-items: center;
        width: 800px;
        flex-wrap: wrap;
        height: 600px;
      }

      .images-list > div {
        width: 400px;

        outline: 1px solid red;
      }
    </style>
  </head>
  <body>
    <h1 id="h1">你好</h1>
    <button id="btn">button</button>

    <div class="images-list">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>3</div>
    </div>

    <script>
      // ResizeObserver;
      // MutationObserver;
      // IntersectionObserver;
      // PerformanceObserver;
      // debugger;

      const btn = document.querySelector('#btn');
      const h1 = document.querySelector('#h1');

      function delay() {
        requestIdleCallback(() => {
          const start = Date.now();
          while (Date.now() - start < 3000) {
            console.log('== while ====>');
          }
        });
      }

      btn.addEventListener('click', () => {
        console.log('== h1.addEventListener ====>');
        h1.textContent = '我很帅';
        delay();
      });

      queueMicrotask(() => {
        console.log('== queueMicrotask ====>');
      });

      Promise.resolve().then(() => {
        console.log('== Promise.resolve ====>');
      });

      for (;;) {
        console.log('需求评审 => 设计评审 => 写页面 => 后端联调 => 测试改BUG => 加班上线');
      }
    </script>
  </body>
</html>
